import { addRegularRequest } from '@/apis/regular'
import { storeAll } from '@/store'
import { layout } from '@/utils/contants'
import { Button, Cascader, Form, Select, message } from 'antd'
import { observer } from 'mobx-react-lite'
import React, { useEffect } from 'react'

const AddRegularParking: React.FC = () => {
	const [form] = Form.useForm()
	const { usersStore: { userOptions }, parkingStore: { options, parking, setOptions, getParkingLot } } = storeAll

	useEffect(() => {
		setOptions(parking, 0)
	}, [parking, setOptions])

	const onFinish = (values: any) => {
		values.pid = values.pid[2]
		addRegularRequest(values).then((res: any) => {
			message.success(res.message)
			form.resetFields()
			getParkingLot()
		})
	}

	return <div className="addRegularWrap">
		<Form form={form} onFinish={onFinish} {...layout}>
			<Form.Item name={['uid']} label="用户" rules={[{ required: true, message: '请选择用户' }]}>
				<Select options={userOptions}></Select>
			</Form.Item>
			<Form.Item name={['pid']} label="位置" rules={[{ required: true, message: '请选择位置' }]}>
				<Cascader options={options}></Cascader>
			</Form.Item>
			<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
				<Button type="primary" htmlType="submit">
					修改
				</Button>
			</Form.Item>
		</Form>
	</div>
}

export default observer(AddRegularParking)
